<template>
  <v-edit-title :element="element" :index="index" :total="total">
    <div class="c-forced-descriptions">
      <div
        v-for="(descriptions, index) in element.content.content"
        :key="index"
        class="c-forced-desc-wrapper"
      >
        <span
          v-for="(description, childIndex) in descriptions"
          :key="description"
          class="c-forced-description"
        >
          <editable-cell
            :text="description"
            @change="onCellChange(index, childIndex, $event)"
            @remove="onCellRemove(index, childIndex, $event)"
          />
        </span>
        <a-button @click="addRow(index)">新增内容</a-button>
      </div>
    </div>
    <div class="c-forced-second-description">
      <v-edit-span v-model="element.content.desc" />
    </div>
    <div class="c-forced-slider-wrapper">
      <forced-slider
        v-model="current"
        :min="0"
        :max="element.content.level.length"
        :tips="element.content.level"
        :active="current"
        @change="change"
      />
      <a-button @click="changeList">修改选项</a-button>
    </div>
    <a-modal v-model="visible" title="编辑表格下拉框" @ok="handleOk">
      <p v-for="(item, index) in selectList" :key="index">
        <editable-cell
          :text="item.content"
          :if-can-edit="item.ifCanEdit"
          @change="onModalCellChange(index, $event)"
          @remove="onModalCellRemove(index)"
        />
      </p>
      <p><a-button @click="addModal">添加一行</a-button></p>
    </a-modal>
  </v-edit-title>
</template>
<script>
export default {
  props: {
    element: {
      type: Object,
      default() {
        return {
          title: '',
          content: { content: [], desc: '', level: [] },
          id: -1,
        }
      },
    },
    index: Number,
    total: Number,
  },
  data() {
    return {
      selectList: [],
      visible: false,
    }
  },
  computed: {
    current() {
      if (this.element.result && this.element.result[0]) {
        return this.element.result[0].index
      }
      return this.element.content.level.length / 2
    },
  },
  created() {
    console.log('content', this.element)
  },
  mounted() {},
  methods: {
    onCellChange(index, rowIndex, e) {
      console.log(rowIndex, e)
      this.element.content.content[index].splice(rowIndex, 1, e)
    },
    onCellRemove(index, rowIndex) {
      this.element.content.content[index].splice(rowIndex, 1)
    },
    changeList() {
      this.visible = true
      this.selectList = this.element.content.level.map((item) => {
        return {
          content: item,
          ifCanEdit: false,
        }
      })
    },
    addModal() {
      this.selectList.push({
        ifCanEdit: true,
        content: '',
      })
    },
    onModalCellChange(index, value) {
      this.selectList[index].content = value
      console.log(this.selectList)
      this.element.content.level = this.selectList.map((item) => item.content)
    },
    onModalCellRemove(index) {
      this.selectList.splice(index, 1)
      this.element.content.level = this.selectList.map((item) => item.content)
    },
    handleOk() {
      this.visible = false
    },
    showModal() {
      this.visible = true
    },
    addRow(index) {
      this.element.content.content[index].push('内容待修改')
    },
    change(index) {
      if (index >= 0 && index < this.element.content.level.length) {
        this.submit(index)
      }
    },
    submit() {
      const answer = this.element
      console.log('暴露给父组件', answer)
      this.$emit('complete', answer)
    },
  },
}
</script>
<style scoped lang="less">
.c-forced-descriptions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .c-forced-desc-wrapper:first-child {
    margin-right: 28px;
  }
  .c-forced-desc-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    width: 329px;
    min-height: 184px;
    padding-left: 15px;

    font-size: 14px;
    line-height: 24px;

    color: rgba(102, 102, 102, 0.8);
    font-weight: normal;

    background-color: rgba(165, 165, 165, 0.1);

    &:before {
      display: inline-block;
      position: absolute;
      content: "";
      width: 3px;
      height: 13px;
      left: 1px;
      top: 15px;
      background-color: rgba(1, 85, 225, 1);
    }
    .c-forced-description:first-of-type {
      margin-top: 10px;
      color: #333333;
      font-family: "PingFang SC", serif;
      font-weight: bold;
    }
  }
}
.c-forced-second-description {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 16px;
  color: #333333;
  font-weight: 500;
}
.c-forced-slider-wrapper {
  margin-top: 27px;
}
</style>
